import React, { Component } from 'react'
import './GedanList.css';
import axios from 'axios';
import {Link} from 'react-router-dom'

export default class VideoList extends Component {

    state = {
        data: []
    }

    render() {
        return (
            <div className="song-container">
                <h2>热门歌单</h2>
                <hr />
                <div className="song-list">
                    {
                        this.state.data.map(item => {
                            return <div key={item.id} className="item">
                                        <div className="cover">
                                            <img onClick={this.jump(item.id)} src={item.imgurl} alt="" />
                                        </div>
                                        <h4>{item.dissname}</h4>
                                    </div>
                        })
                    }
                    
                </div>
            </div>
        )
    }

    //声明方法 实现跳转
    jump = (id) => {
        return () => {
            //1. params 传参跳转
            // this.props.history.push('/playlist/' + id);
            //2. query 传参
            // this.props.history.push('/playlist?id='+ id);
            //3. state 传参
            this.props.history.push({
                pathname: '/playlist',
                state: {
                    id: id
                }
            })

            //replace 方法
            // this.props.history.replace({
            //     pathname: '/playlist',
            //     state: {
            //         id: id
            //     }
            // })
        }
    }

    // https://api.xiaohigh.com/douyin
    async componentDidMount(){
        //发送请求 获取视频数据
        let result = await axios('http://api.xiaohigh.com/songlist');
        console.log(result.data);
        //查看结果
        // console.log(result.data);
        //设置状态数据
        this.setState({
            data: result.data
        })
    }
}
